import { Space, Table, Tag, Button, Radio, Input, Form } from "antd";
import { Col, Row } from "antd";
import type { RadioChangeEvent } from "antd";
import dayjs from "dayjs";
import type { DatePickerProps } from "antd";
import { DatePicker } from "antd";
import { useEffect, useState, useRef } from "react";

const baseSearch: any = {
  page: 1,
  order: "asc",
  state: "",
  id: "",
  name: "",
  products: "",
  shop: "",
  endTime: "",
};
const { RangePicker } = DatePicker;
var options = [
  { label: "全部", value: "" },
  { label: "预告", value: "0" },
  { label: "待开始", value: "1" },
  { label: "进行中", value: "2" },
  { label: "已结束", value: "3" },
];
function SearchFrom(props: any) {
  const [flag, setFlag] = useState(false);
  const formRef: any = useRef(null);
  var search: any = props.search;
  var setSearch: Function = props.setSearch;
  const [groupList, setGroupList] = useState([]);

  const onChange = ({ target: { value } }: RadioChangeEvent) => {
    console.log("radio1 checked", value);
    setSearch({ ...search, state: value });
  };

  // const onReset = () => {
  // formRef.current?.resetFields();

  // setSearch({...obj})
  // setTimeout(()=>{
  //   props.getGroup()
  // },10)
  // props.getGroup()
  // };
  useEffect(() => {
    console.log("search发生变化");
    // var flag = true;
    // for(var k in search){
    //   if(search[k]!==baseSearch[k]){
    //     flag=false;
    //   }
    // }
    // if(flag){
    //   props.getGroup()
    // }
    if (baseSearch === search) {
      props.getGroup();
    }
  }, [search]);
  return (
    <Form ref={formRef}>
      {/* {JSON.stringify(search)} */}
      <Row
        gutter={40}
        style={{ paddingLeft: 40, paddingRight: 40, margin: 0, marginTop: 20 }}
      >
        <Col span={8}>
          <Form.Item
            label="活动编号"
            name="id"
            rules={[{ pattern: /^\d+$/, message: "请输入数值" }]}
          >
            <Input
              placeholder="活动编号"
              value={search.id}
              onChange={(e) => setSearch({ ...search, id: e.target.value })}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="活动名称" name="name">
            <Input
              placeholder="名称"
              value={search.name}
              onChange={(e) => setSearch({ ...search, name: e.target.value })}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="活动开始时间" name="startTime">
            <RangePicker
              onChange={(e, str) => {
                if (str[0]) {
                  console.log(str);
                  setSearch({ ...search, startTime: str.join(",") });
                } else {
                  setSearch({ ...search, startTime: "" });
                }
              }}
              format={"YYYY-MM-DD HH:mm:ss"}
            />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={40} style={{ paddingLeft: 40, paddingRight: 40, margin: 0 }}>
        <Col span={8}>
          <Form.Item label="参与商品" name="products">
            <Input
              placeholder="参与商品"
              value={search.products}
              onChange={(e) =>
                setSearch({ ...search, products: e.target.value })
              }
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="参与店铺" name="shop">
            <Input
              placeholder="店铺名称或id"
              value={search.shop}
              onChange={(e) => setSearch({ ...search, shop: e.target.value })}
            />
          </Form.Item>
        </Col>
        <Col span={8}>
          <Form.Item label="活动结束时间" name="endTime">
            <RangePicker
              onChange={(e, str) => {
                if (str[0]) {
                  console.log(str);
                  setSearch({ ...search, endTime: str.join(",") });
                } else {
                  setSearch({ ...search, endTime: "" });
                }
              }}
              format={"YYYY-MM-DD HH:mm:ss"}
            />
          </Form.Item>
        </Col>
      </Row>

      <div
        style={{
          paddingLeft: 60,
          paddingRight: 40,
          display: "flex",
          justifyContent: "space-between",
        }}
      ><div><span>活动类别:</span>
        <Radio.Group
          optionType="button"
          options={options}
          onChange={onChange}
          value={search.state}
        />
        </div>
        <div>
          <Button type="primary" onClick={props.getGroup}>
            查询
          </Button>
          <Button
            onClick={() => {
              setSearch(baseSearch);
              formRef.current.resetFields();
            }}
          >
            重置
          </Button>
        </div>
      </div>
    </Form>
  );
}

export default SearchFrom;
